<template>
  <div class="loginmain">
    <div class="lomain">
      <el-form v-loading="loading" :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm  login-container" @keyup.native.enter="handleSubmit2">
        <div class="logotab">
          <a  :class='{ active: isActive }'>后台登录</a>
        </div>
        <el-form-item prop="account" @keyup.enter="handleSubmit2">
          <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <!--      <el-form-item prop="yzm" class="yzm">-->
        <!--        <el-input v-model="ruleForm2.yzm" placeholder="验证码" id="inputCode"></el-input>-->
        <!--        &lt;!&ndash; <img id="id_imageCode" @click="updateCode" src="/aq/admin/login/vfcode"/> &ndash;&gt;-->
        <!--        <img id="id_imageCode" v-if="codeimg" @click="updateCode" :src="codeimg"/>-->
        <!--      </el-form-item>-->
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
          <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import config from "@/config.js";
  import actionurl from "../assets/js/actionurl";
  import {
    login
  } from '@/api.js';
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
        logining: false,
        isActive:false,
        active:'#223760',
        ruleForm2: {
          account: "",
          checkPass: "",
          yzm: ""
        },
        https: "",
        codeimg: "",
        rules2: {
          account: [
            { required: true, message: "请输入账号", trigger: "blur" }
            //{ validator: validaePass }
          ],
          checkPass: [
            { required: true, message: "请输入密码", trigger: "blur" }
            //{ validator: validaePass2 }
          ],
          yzm: [
            // { required: true, message: "请输入验证码", trigger: "blur" }
            //{ validator: validaePass2 }
          ]
        },
        checked: true,
        loading: false
      };
    },
    created() {
      this.codeimg = config.URLWEBHTTP + "admin/login/imageCode";
      this.updateCode();
    },
    methods: {
      admintab(){
        this.isActive = true;
      },
      comtab(){
        this.isActive = false;

      },
      updateCode() {
        var _this = this;
        var num = Math.random();
        this.codeimg = this.codeimg + "?d=" + num;
      },

      handleSubmit2() {
        // this.$router.push({path: '/home'});
        var _this = this;
        _this.loading = true;
        _this.$refs.ruleForm2.validate(valid => {
          if (valid) {
            /* ajax请求演示 使用es7 async await */


            _this.login();

          } else {
            this.$message("验证未通过");
            console.log("error submit!!");
            _this.loading = false;
            return false;
          }
        });
      },
      async login() {
        try {
          let param = {
            user: this.ruleForm2.account,
            pwd: this.ruleForm2.checkPass
          };
          let result = await login(param);
          console.log(result);
          if (result.data.status == 1) {
            sessionStorage.setItem("Authorization", result.data.data.Authorization);
            this.$message({
              message: result.message,
              type: "success"
            });
            this.loading = false;
            this.$router.push({ path: "/home" });
          } else {
            this.$message(re.msg);
            this.updateCode();
            this.loading = false;
            this.ruleForm2.yzm = '';
          }
        } catch (error) {
          console.log(error);
          this.$message({
            message:'登录失败',
            type: "error"
          });
          this.loading = false;
        }
        /* 这里使用了config 会合成环境静态变量以及通用静态变量 */
        // this.$message("发送ajax请求，打印全局静态变量去控制台查看");
        // console.log("全局静态变量", config);
      }
    }
  };
</script>

<style lang="scss" scoped>

  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-clip: padding-box;
    height: 50vh;
    width: 100%;
    min-height: 300px;
    // width: 350px;
    box-sizing: border-box;
    padding:50px;
    // padding: 35px 35px 15px 35px;
    background: #1d93dd;
    // border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
    .yzm {
      position: relative;
      // width: 100px;
      img{
        width: 35%;
        height: 38px;

      }
    }
    #id_imageCode {
      position: absolute;
      right: 3px;
      top: 1px;
      height: 34px;
    }
  }
  .loginmain {
    min-width: 1080px;

    background: url("../assets/images/bg.jpg") 0% 100% no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100vh;
    .lomain{
      // min-width: 800px;
      display: flex;
      width: 400px;
      position: absolute;
      bottom: 20vh;
      transform: translateX(-50%);
      left: 50%;
      box-shadow: 0 0 10px 0 #11689e;

      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      overflow: hidden;
    }
    .left {
      width: 55%;
      height: 50vh;
      background:#f5f5f5 url("../assets/images/biglou.png") 50% 100% no-repeat;
      background-size: 100%;
      text-align: center;
      min-height: 300px;
      img{
        width: 40%;
        margin-top: 10px;
      }
    }

  }
  .taba{
    color:#FFF;
  }
  .active{
    color: #ffdd64 !important;
  }
  .logotab{
    position: absolute;
    top: 15px;
    left: 20px;
    width: 100%;
    font-size: 16px;
  }
  .logotab a{
    color: #fff;
    font-weight: bold;
  }
  @media screen and (max-width: 730px) {
    .loginmain .lomain{
      width: 90%;
      margin-left: -45%;
      .left{
        display: none;
      }
    }
    .login-container{
      width: 100%;
    }
  }
</style>
